import {Image, ScrollView, Video, Text, View} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import api from 'api';
import 'taro-ui/dist/style/components/tabs.scss';
import './list.less';
import Blank from '@/pages/common/blank';
import {returnTime} from '@/utils/returnTime';
import goldImg from '@/assets/image/my/gold.png';
import write from '@/assets/image/community/write.png';
import zan from '@/assets/image/community/zan.png';
import zanCurr from '@/assets/image/community/zan-curr.png';
import share from '@/assets/image/community/share.png';
import nones from '@/assets/image/none/nones.png';
import Index from '../index';

type IPostProps = T.IProps & T.IPostProps;
//@ts-ignore
@connect<Partial<IPostProps>, T.IPostState>(store2Props, actions)
export default class post extends Component<Partial<IPostProps>, T.IPostState> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
      clickLikeVal: false,
    };
  }

  componentDidMount() {}

  renderItem(item, index, type) {
    let {
      actions: {action},
    } = this.props;
    return (
      <View
        className="listViews"
        onClick={(e) => {
          e.stopPropagation();
          Taro.navigateTo({
            url: `/pages/package-B/goods/goods-details/index?skuId=${item.goodsInfoId}&pointsGoodsId=${item.pointsGoodsId}`,
          });
        }}
      >
        {item.goodsInfo.goodsInfoImg != '' && item.goodsInfo.goodsInfoImg
          ? this.renderImg(item.goodsInfo.goodsInfoImg.split(';'))
          : null}
        {item.goodsInfo.goodsInfoName != '' && <Text className="goodsInfoName">{item.goodsInfo.goodsInfoName}</Text>}
        <View className="pointsBox">
          <View className="row">
            <Image className="goldImg" mode="widthFix" src={goldImg} />
            <View className="points">{item.points}</View>
          </View>
          <View className="stock">库存:{item.stock}</View>
        </View>
      </View>
    );
  }

  //图片渲染
  renderImg(list) {
    return (
      <View className="imgItem">
        <Image
          // onClick={this.onImageClick.bind(this, list[0], [list[0]])}
          src={list[0]}
          mode="widthFix"
          className="b_img"
        />
      </View>
    );
  }
  onImageClick = (item, urls) => {
    this.previewImage(item, urls);
  };
  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  _onScrollToLower = () => {
    let {
      main: {pageNum, totalPages},
      actions: {action},
    } = this.props;
    let num = pageNum + 1;
    if (num == totalPages) return;
    this.props.actions.action.commonChange('main.pageNum', num);
    this.props.actions.action.findPointsMall();
  };

  _onRefresherRefresh = () => {
    let {refresherTriggered} = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    this.props.actions.action.commonChange('main.pageNum', 0);
    this.props.actions.action.findPointsMall();
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  render() {
    let {refresherTriggered} = this.state;
    let {
      main: {leftData, rightData, pageNum, totalPages, isLoading},
      actions: {action},
    } = this.props;
    return (
      <View className="integralGoods">
        <ScrollView
          className="scrollView"
          onScrollToLower={this._onScrollToLower}
          refresherEnabled
          refresherTriggered={refresherTriggered}
          onRefresherPulling={this._onRefresherRefresh}
          scrollY
        >
          {leftData.length > 0 ? (
            <View className="flex">
              <View style={{width: '50%'}}>
                {leftData.map((item, index) => {
                  return this.renderItem(item, index, 1);
                })}
              </View>
              <View style={{width: '50%'}}>
                {rightData.map((item, index) => {
                  return this.renderItem(item, index, 2);
                })}
              </View>
            </View>
          ) : (
            <Blank
              content={'还没有商品信息！'}
              img={nones}
              imgStyle={{width: '343rpx', height: '288rpx'}}
              textStyle={{
                fontSize: '28rpx',
                color: '#BFBFBF',
                textAlign: 'center',
                marginTop: '40rpx',
              }}
            />
          )}
          {leftData.length > 1 && pageNum + 1 < totalPages && <View className="status">加载中</View>}
          {leftData.length > 1 && pageNum + 1 == totalPages && <View className="status">已经到底了~</View>}
        </ScrollView>
      </View>
    );
  }
}
